<template>
  <div class="home-pc">
    <!-- <div class="home-header">
      <div class="home-header-content">
        <div class="header-left">
          <el-image style="height: 84px" :src="url" />
        </div>
        <div class="header-right"><headerMenu></headerMenu></div>
      </div>
    </div> -->

    <div class="home-content">
      <div class="carousel-content">
        <userBox
          class="user-box-component"
          v-if="useinfo.username"
          :useinfo="useinfo"
          @logoutInfo="logoutInfo"
        >
        </userBox>
        <loginBox class="user-box-component" @upUserInfo="upUserInfo" v-else> </loginBox>

        <carousel :itemList="bannerListData"> </carousel>
      </div>
      <div class="home-content-box">
        <div class="home-content-left">
          <div class="home-content-events">
            <tabTitle :titilText="$t('Homepage.events')"> </tabTitle>
            <!-- {{ $t('Credits') }} -->
            <BelowGameWindow :itemData="recommendData[0]"> </BelowGameWindow>
          </div>
          <!-- <div class="home-content-welfare">
            <tabTitle titilText="独家礼包"> </tabTitle>
            <div v-for="(item, index) in 5" :key="index">
              <giftBag class="application-box-introduce"></giftBag>
            </div>
          </div> -->
        </div>
        <div class="home-content-right">
          <div class="fine-game">
            <tabTitle :titilText="$t('Homepage.Fine')"> </tabTitle>
            <div class="game-list">
              <el-row :gutter="10">
                <el-col
                  :span="6"
                  class="game-list-item"
                  v-for="(item, index) in recommendData"
                  :key="index"
                >
                  <gamePlayItem :itemData="item"> </gamePlayItem
                ></el-col>
              </el-row>
            </div>
          </div>

          <div class="fine-newgame">
            <tabTitle :titilText="$t('Homepage.Recommend')"> </tabTitle>
            <div class="newgame-list">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item, index) in newListData" :key="index">
                  <gameItem class="application-box-introduce" :itemData="item"></gameItem
                ></el-col>
              </el-row>
            </div>
          </div>

          <div class="hot-newgame">
            <tabTitle :titilText="$t('Homepage.Popular')"> </tabTitle>
            <div class="newgame-list">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item, index) in hotListData" :key="index">
                  <gameItem class="application-box-introduce" :itemData="item"></gameItem
                ></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <commonFooter></commonFooter>
</template>

<script setup>
import { ref } from 'vue'
import { useAuth } from '@/use/useAuth'
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import carousel from './components/carousel.vue'
import commonFooter from '@/components/PCcomponents/commonFooter.vue'
import tabTitle from './components/tabTitle.vue'
const store = useUserStore()
import loginBox from '@/components/PCcomponents/loginBox.vue'
import userBox from '@/components/PCcomponents/userBox.vue'
import gameItem from './components/gameItem.vue'
import giftBag from './components/giftBag.vue'
import gamePlayItem from './components/gamePlayItem.vue'
import BelowGameWindow from './components/BelowGameWindow.vue'
import { fetchBannerList, fetchRecommendList, fetchNewList, fetchHotList } from '@/api/game'

const user = computed(() => store.getUserInfo)
console.log(user, 123)

const useinfo = ref({
  user_id: user.value.user_id,
  username: user.value.username,
  currency: user.value.currency,
})
let buttonColo = ref('#f5f5f5')

let textColor = ref('#818181')
// console.log(useinfo, 123123)
// const user = ref(useAuth())
// user.value.username = user.value.user.username
const upUserInfo = (data) => {
  useinfo.value.user_id = data.user_id
  useinfo.value.username = data.username
  useinfo.value.currency = data.currency
}
const logoutInfo = (data) => {
  useinfo.value = {}
}
// 获取首页banner（轮播图）列表
let bannerListData = ref([])
const getBannerList = async () => {
  let data = await fetchBannerList({})
  console.log(data, 'bannerListData')
  bannerListData.value = data
}
getBannerList()

// 获取首页"精品游戏"列表
let recommendData = ref([])
const getRecommendList = async () => {
  let data = await fetchRecommendList({})
  console.log(data, 'RecommendListData')
  recommendData.value = data
}
getRecommendList()

// 获取首页"新游推荐"列表
let newListData = ref([])
const getNewList = async () => {
  let data = await fetchNewList({})
  console.log(data, 'newListData')
  newListData.value = data
}
getNewList()

// 获取首页"新游推荐"列表
let hotListData = ref([])
const getHotList = async () => {
  let data = await fetchHotList({})
  console.log(data, 'hotListData')
  hotListData.value = data
}
getHotList()
</script>
<style lang="scss" scoped>
.home-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f6f6f6;
  font-weight: 300;
  font-size: 15px;
  .home-content {
    width: 1200px;
  }
  .home-header {
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .home-header-content {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 1200px;
    }
    .header-left {
      width: 288px;
      padding-right: 40px;
    }
    .header-right {
      flex: 1;
    }
  }
  .home-content-box {
    display: flex;
    margin-top: 10px;
    .home-content-left {
      width: 300px;

      height: 500px;
      margin-right: 10px;

      .home-content-events {
        background: #fff;
        padding: 10px 10px;
      }
      .home-content-welfare {
        background: #fff;
        padding: 10px 10px;
        margin-top: 16px;
      }
    }
    .home-content-right {
      flex: 1;

      .fine-game {
        background: #fff;
        padding: 14px 18px 16px 18px;

        .el-row {
          width: 100%;
        }
      }
    }
  }
  .carousel-content {
    position: relative;
    .user-box-component {
      flex: 1;
      background: #fff;

      position: absolute;
      top: 50px;
      left: 20px;
      z-index: 99;
      display: flex;
    }
  }
}
.game-list {
  display: flex;
  .game-list-item {
    flex: 1;
    margin-right: 16px;
  }

  .game-list-item:last-child {
    /* 在这里编写样式 */
    margin-right: 0;
  }
}

.fine-newgame {
  /* 在这里编写样式 */
  padding: 14px 18px 16px 18px;
  margin-right: 0;
  margin-top: 16px;
  background: #fff;
  .newgame-list {
    display: flex;
    width: 100%;
    .el-row {
      width: 100%;
      // margin-right: 10px;
    }
    .newgame-list-item {
      flex: 6;
      // margin-right: 10px;
    }

    .newgame-list-item:last-child {
      /* 在这里编写样式 */
      margin-right: 0;
    }
  }
}
.hot-newgame {
  /* 在这里编写样式 */
  padding: 14px 18px 16px 18px;
  margin-right: 0;
  margin-top: 16px;
  background: #fff;
  .newgame-list {
    display: flex;
    .el-row {
      width: 100%;
      // margin-right: 10px;
    }
    .newgame-list-item {
      flex: 6;
      // margin-right: 10px;
    }
    .newgame-list-item:last-child {
      /* 在这里编写样式 */
      margin-right: 0;
    }
  }
}
// .footer {
//   width: 100%;
//   height: 92px;
//   background-color: rgb(109 102 102);
//   z-index: 9999;
//   position: relative;
//   margin-top: 20px;
//   .footer-mid {
//     margin: 0 auto;
//     overflow: hidden;
//     font-size: 16px;
//     width: 810px;
//   }
// }
// 1122
</style>
